<template>
	<div class="lm-container-content full" v-resize="handerResize">
		<div ref="resizable" class="resizable" style="width: 50%" v-draggable="{ minWidth: minWidth, maxWidth: maxWidth, handler: handlerWidth}">
			<div class="resizableLine"></div>
			<lm-dialogue-panel></lm-dialogue-panel>
		</div>
		<adviser-dialogue-panel></adviser-dialogue-panel>
	</div>
</template>

<script>
import AdviserDialoguePanel from '@/components/lm-chat/adviser-dialogue-panel.vue'
import LmDialoguePanel from '@/components/lm-chat/lm-dialogue-panel.vue'
import { mapState, mapMutations } from "vuex"
export default {
	name: 'ImChat',
	components: {
		AdviserDialoguePanel,
		LmDialoguePanel
	},
	data() {
		return {
			minWidth: 583,
			maxWidth: null
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.setLmPanelWidth(this.$refs.resizable.clientWidth)
		})
	},
	methods: {
		...mapMutations('lm-chat', ['setLmPanelWidth']),
		// resizable宽度变化处理
		handlerWidth(width) {
			this.setLmPanelWidth(width)
		},
		// lm-container-content宽度变化处理
		handerResize(width) {
			this.maxWidth = width - this.minWidth - 2
		}
	}
}
</script>

<style lang="scss" scoped>
.lm-container-content{
	display: flex;
	font-size: 12px;
	color: #464646;
}
.resizable{
	position: relative;
	.resizableLine{
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		height: 100%;
		cursor: col-resize;
		width: 5px;
		z-index: 1;
	}
}
</style>